<template>
  <div class="dndList">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>{{list2Title}}</span>
          </div>
          <div class="dndList-list" :style="{width:width2}">
            <el-row>
              <el-col>
                <el-form :inline="true" :model="filters">
                  <el-form-item label="昵称">
                    <el-input  size="mini" v-model="filters.displayName" placeholder="昵称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
                  </el-form-item>
                  <el-form-item label="电话">
                    <el-input  size="mini" v-model="filters.phone" placeholder="电话" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
                  </el-form-item>
                  <el-form-item label="组织">
                    <el-input  size="mini" v-model="filters.departmentName" placeholder="组织" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
                  </el-form-item>

                  <el-form-item>
                    <el-button  size="mini" type="success" icon="el-icon-search" @click="searchUser">查询</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <draggable :list="filterList2" :options="{group:'article'}">

              <el-table size="mini" fit border @row-click="rowClickHandle" highlight-current-row :data="filterList2"
                        height="390" element-loading-text="拼命加载中" v-loading="loading" style="width: 100%;">

                <el-table-column  prop="displayName" label="昵称" align="center">
                </el-table-column>

                <el-table-column prop="phone" label="电话" align="center">
                </el-table-column>
                <el-table-column prop="departmentName" label="组织" align="center">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" min-width="150" header-align="center">
                </el-table-column>
              </el-table>
            </draggable>
            <el-row>
              <el-col style="margin-top: 13px">
                <div class="block">
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="filters.page"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="filters.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="filters.total">
                  </el-pagination>
                </div>
              </el-col>
            </el-row>
          </div>

        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>{{list1Title}}</span>
          </div>
          <div class="dndList-list" :style="{width:width1}">
            <draggable :list="list1" class="dragArea" :options="{group:'article'}">

              <el-table size="mini" fit border highlight-current-row :data="list1"
                        height="504"  style="width: 100%;">

                <el-table-column  prop="displayName" label="昵称" align="center">
                </el-table-column>

                <el-table-column prop="phone" label="电话" align="center">
                </el-table-column>
                <el-table-column prop="departmentName" label="组织" align="center">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" min-width="150" header-align="center">
                </el-table-column>
                <el-table-column label="删除" min-width="150" header-align="center">
                  <template slot-scope="scope">
                      <i style="color:#ff4949" class="el-icon-delete" @click="deleteEle(scope.row)"></i>
                  </template>
                </el-table-column>
              </el-table>

            </draggable>
          </div>
        </el-card>
      </el-col>
    </el-row>





  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {getUserListPage} from '@/api/sys/user/';
export default {
  name: 'DndList',
  components: { draggable },
  computed: {
    filterList2() {
      return this.list2.filter(v => {
        if (this.isNotInList1(v)) {
          return v
        }
        return false
      })
    }
  },
  activated(){
    this.searchUser();
  },
  data(){
    return{
      loading: false,
      list2:[],
      filters:{
        displayName:'',
        disabled: 1,

        phone:'',
        page:1,
        total:0,
        limit:2,
      },
    }
  },
  props: {
    list1: {
      type: Array,
      default() {
        return []
      }
    },
  /*  list2: {
      type: Array,
      default() {
        return []
      }
    },*/
    list1Title: {
      type: String,
      default: 'list1'
    },
    list2Title: {
      type: String,
      default: 'list2'
    },
    width1: {
      type: String,
      default: '100%'
    },
    width2: {
      type: String,
      default: '100%'
    }
  },
  methods: {
    handleSizeChange(val) {
      this.filters.limit = val;
      this.searchUser();
    },
    handleCurrentChange(val) {
      this.filters.page = val;
      this.searchUser();
    },
    rowClickHandle(row, event, column){
      this.list1.push(row)
    },
    searchUser(){
      let that = this;
      getUserListPage(that.filters).then(function (response) {
        const result = response.data;
        let {totalCount,list } = result.data;
        that.list2= [];
        that.filters.total = totalCount;
        list.forEach((item) =>{
          that.list2.push(item);
        });
        that.loading = false;
      }).catch(function (error) {
        that.loading = false;
      });
    },

    isNotInList1(v) {
      return this.list1.every(k => v.id !== k.id)
    },
    isNotInList2(v) {
      return this.list2.every(k => v.id !== k.id)
    },
    deleteEle(ele) {
      for (const item of this.list1) {
        if (item.id === ele.id) {
          const index = this.list1.indexOf(item)
          this.list1.splice(index, 1)
          break
        }
      }
      if (this.isNotInList2(ele)) {
        this.list2.unshift(ele)
      }
    },
    pushEle(ele) {
      this.list1.push(ele)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dndList {
  background: #fff;
  padding-bottom: 10px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .dndList-list {
    float: left;
    padding-bottom: 30px;
    &:first-of-type {
      margin-right: 2%;
    }
    .dragArea {
      margin-top: 15px;
      min-height: 50px;
      padding-bottom: 30px;
    }
  }
}

.list-complete-item {
  cursor: pointer;
  position: relative;
  font-size: 14px;
  padding: 5px 12px;
  margin-top: 4px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
}

.list-complete-item-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 50px;
}

.list-complete-item-handle2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 20px;
}

.list-complete-item.sortable-chosen {
  background: #4AB7BD;
}

.list-complete-item.sortable-ghost {
  background: #30B08F;
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
</style>
